<!--
 * @Author: lsy
 * @Date: 2023-02-16 17:30:55
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-16 19:33:34
 * @Description: 视频播放组件
-->
<template>
  <videoPlay
    v-bind="options" 
  />
</template>

<script setup>
import { ref, defineProps } from 'vue';
import 'vue3-video-play/dist/style.css';
import { videoPlay } from 'vue3-video-play';

const props = defineProps({
  src: {
    type: String,
    default: '',
  }
})
const options = ref({
  width: '100%', //播放器高度
  height: '100%', //播放器高度
  color: "#409eff", //主题色
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false,  //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  src: props.src, //视频源
  poster: '', //封面
});
</script>

<style lang="scss" scoped>
.d-player-wrap {
  ::v-deep(.d-player-input) {
    cursor: pointer;
  }
  ::v-deep(.d-play-btn) {
    width: 40px;
    height: 40px;
    .icon-play {
      font-size: 20px!important;
    }
  }
}
</style>